<template>
  <xcmg-drawer v-model="_visible" :title="props.title" width="800">
    <!-- 表单区域 -->
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="80px"
      class="demo-ruleForm"
      :size="formSize"
      status-icon
    >
      <!-- 编号 -->
      <el-form-item label="编号" prop="rule_code">
        <xcmg-input
          v-model="ruleForm.rule_code"
          placeholder="自动生成"
          disabled
        />
      </el-form-item>

      <!-- 记录版本 -->
      <el-form-item label="记录版本" prop="description">
        <xcmg-input v-model="ruleForm.description" placeholder="自动生成" />
      </el-form-item>

      <!-- 规范名称 -->
      <el-form-item label="规范名称" prop="description">
        <xcmg-input v-model="ruleForm.description" placeholder="自动生成" />
      </el-form-item>
      <el-form-item label="属性类型" prop="attrType">
        <xcmg-select
          v-model="ruleForm.attrType"
          placeholder="请选择属性类型"
          clearable
        >
          <xcmg-option
            v-for="item in attrTypeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </xcmg-select>
      </el-form-item>

      <!-- 是否启用 -->
      <el-form-item label="是否启用" prop="active">
        <xcmg-switch
          v-model="ruleForm.active"
          size="large"
          inline-prompt
          active-text="是"
          inactive-text="否"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="drawer-footer">
        <el-button type="primary" @click="handleSave()"
          >保存</el-button
        >
        <el-button @click="handleClose()">取消</el-button>
      </div>
    </template>
  </xcmg-drawer>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';

const props = defineProps<{
  title: string;
  visible: boolean,
}>();

const emit = defineEmits(['update:visible']);

const _visible = computed({
  get() {
    return props.visible;
  },
  set(val) {
    emit('update:visible', val);
  },
});
const handleSave = () => {
  // 保存逻辑
  _visible.value = false;
};
const handleClose = () => {
  _visible.value = false;
};
</script>

<style scoped>
.drawer-footer {
  width: calc(100% - 40px) !important;
  border-top: none !important;
}
</style>